<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/monitor.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>后台权限管理系统</title>
    <script type="text/javascript">
        function del(obj,oId) {
            $('#delyes').click(function () {
                $.ajax({
                    url:"${pageContext.request.contextPath}/delOrderDetail",
                    type:"post",
                    data:{"oid":oId},
                    dataType:"text",
                    success: function (data) {
                        console.log(data);
                        if (data){
                            // $(obj).parent().parent().remove();
                            window.location.href="/findByuNameAndcName?uname=${uname}&cName=${cName}&orderStatus=${orderStatus}&page=${pageInfo.pageNum}"
                        }else{
                            alert("删除失败")
                        }
                    },
                    error:function (data) {
                        console.log(data)
                    }
                })
            })
        }


    </script>
</head>

<body>
<%--<div id="app" style="height: 100%">--%>
<div id="container">
    <section class="public-main">
        <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>

        <!-- 主体部分 -->

        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">

                    <div class="location">
                        <strong>订单管理</strong>
                        <span>订单详情</span>
                    </div>

                    <div class='main-right-header-right'>

                            <span class="">
                                超级管理员：李艳卿 Chelsea
                            </span>
                        <span class="">
                            <a href="#"><img src="img/head.jpg" style="width: 25px"></a>
                        </span>
                        <span class=""><a href="login.html">退出登录</a></span>
                    </div>

                </div>
            </header>

            <form action="/findByuNameAndcName">
                <div class="search">
                    <span>用户名:</span>
                    <input name="uname" type="text" placeholder="请输入用户名" value="${uname}"/>

                    <span>课程名称:</span>
                    <input name="cName" type="text" placeholder="请输入课程名称" value="${cName}" />

                    <span>订单状态</span>
                    <select name="orderStatus">
                        <option value="">--请选择--</option>
<%--                        <option value="obj.oId">{{obj.orderType}}</option>--%>
                        <option value="1">已支付</option>
                        <option value="2">待支付</option>
                        <option value="3">已退款</option>
                        <option value="4">退款中</option>
                        <option value="5">已失效</option>
                    </select>

                    <input class="btn btn-primary" type="submit" value="搜索" />
                    <input type="button" @click="resetList"  value="重置" />
                    <!-- <a href="#" @click="addCourse">增加课程</a> -->
                </div>
            </form>
            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="5%">订单号</th>
                        <th width="15%">用户名</th>
                        <th width="15%">课程名称</th>
                        <th width="20%">购买时间</th>
                        <th width="10%">价格</th>
                        <th width="10%">订单状态</th>
                        <th width="10%">操作</th>
                    </tr>
                    <c:forEach items="${pageInfo.list}" var="orderDetail">
                        <tr>
                            <td>${orderDetail.orders.oId}</td>
                            <td>${orderDetail.orders.user.uname}</td>
                            <td>${orderDetail.course.cName}</td>
                            <td>
                                <fmt:formatDate value="${orderDetail.orders.buyingTime}" pattern="yyyy-MM-dd"></fmt:formatDate>
                            </td>
                            <td>${orderDetail.orders.totals}</td>
                            <td>
                                <c:if test="${orderDetail.orders.orderStatus==1}">
                                    已支付
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==2}">
                                    待支付
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==3}">
                                    已退款
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==4}">
                                    退款中
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==5}">
                                    已失效
                                </c:if>
                            </td>
                            <td>
                                <c:forEach items="${RightDoList}" var="rightDolist">
                                    <c:if test="${rightDolist.rightId eq 5}">
                                        <a href="#" @click="find(${orderDetail.orders.oId})" data-toggle="modal" data-target="#myModal2"><img src="img/read.png" alt="查看" title="查看" />
                                    </c:if>
                                    <c:if test="${rightDolist.rightId eq 4}">
                                        <a href="#" @click="find(${orderDetail.orders.oId})" data-toggle="modal" data-target="#myModal"><img src="img/xiugai.png" alt="修改" title="修改" />
                                    </c:if>
                                    <c:if test="${rightDolist.rightId eq 3}">
                                        <a href="javascript:void(0)" @click="delOrderDetail" onclick="del(this,${orderDetail.orders.oId})"><img src="img/schu.png" alt="删除" title="删除" />
                                    </c:if>
                                </c:forEach>
                            </td>
                        </tr>

                    </c:forEach>
                </table>
                <div>
                    当前第${pageInfo.pageNum}页,共${pageInfo.pages}页,共${pageInfo.total}条
                </div>
                <nav aria-label="Page navigation" class="text-center">
                    <ul class="pagination">
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <li>
                                <a href="/findByuNameAndcName?uname=${uname}&cName=${cName}&orderStatus=${orderStatus}&page=${pageInfo.pageNum-1}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:if>
                        <c:forEach items="${pageInfo.navigatepageNums}" var="page">
                            <c:if test="${pageInfo.pageNum == page}">
                                <li class="active"><a href="/findByuNameAndcName?uname=${uname}&cName=${cName}&orderStatus=${orderStatus}&page=${page}">${page}</a></li>
                            </c:if>
                            <c:if test="${pageInfo.pageNum != page}">
                                <li><a href="/findByuNameAndcName?uname=${uname}&cName=${cName}&orderStatus=${orderStatus}&page=${page}">${page}</a></li>
                            </c:if>

                        </c:forEach>
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                                <a href="/findByuNameAndcName?uname=${uname}&cName=${cName}&orderStatus=${orderStatus}&page=${pageInfo.pageNum+1}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>

                    </ul>
                </nav>

            </div>
            <footer>
                打牛蛙组教育集团
            </footer>


            <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">订单</h4>
                        </div>
                        <div class="modal-body">
                            <div class="tableList">
                                <form action="#">
                                    <div class="">
                                        <label >订单号：</label>
                                        <span style="color: black">{{orderDetail.orders.oId}}</span>
                                    </div>
                                    <div class="">
                                        <label >用户名：</label>
                                        <span style="color: black">{{orderDetail.orders.user.uname}}</span>
                                    </div>
                                    <div class="">
                                        <label >课程名称：</label>
                                        <span style="color: black">{{orderDetail.course.cName}}</span>
                                    </div>
                                    <div class="">
                                        <label >购买时间：</label>
                                        <input type="text" v-model="orderDetail.orders.buyingTime"/>
                                        <span>*请输入时间哦~</span>
                                    </div>
                                    <div class="">
                                        <label >价格：</label>
                                        <span style="color: black">{{orderDetail.orders.totals}}</span>
                                    </div>
                                    <div class="">
                                        <label >订单状态：</label>
                                        <select  name="orderStatus" v-model="orderDetail.orders.orderStatus">
                                            <option value="0">--请选择--</option>
                                            <%--                                <option  value="obj.oId">{{obj.orderType}}</option>--%>
                                            <option value="1">已支付</option>
                                            <option value="2">待支付</option>
                                            <option value="3">已退款</option>
                                            <option value="4">退款中</option>
                                            <option value="5">已失效</option>
                                        </select>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="updateOrder(${pageInfo.pageNum})">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>





            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel1">删除确认</h4>
                        </div>
                        <div class="modal-body">
                            确认要删除吗
                        </div>
                        <div class="modal-footer">
                            <button id="delyes" type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade find" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel2">个人信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="tableList">
                                <form action="#">
                                    <div class="" >
                                        <label >订单号：</label>
                                        <span style="color: black">{{orderDetail.orders.oId}}</span>
                                    </div>
                                    <div class="">
                                        <label >用户名：</label>
                                        <span style="color: black">{{orderDetail.orders.user.uname}}</span>
                                    </div>
                                    <div class="">
                                        <label >课程名称：</label>
                                        <span style="color: black">{{orderDetail.course.cName}}</span>
                                    </div>
                                    <div class="">
                                        <label >购买时间：</label>
                                        <span style="color: black">
                                {{orderDetail.orders.buyingTime}}
                            </span>
                                    </div>
                                    <div class="">
                                        <label >价格：</label>
                                        <span style="color: black">{{orderDetail.orders.totals}}</span>
                                    </div>
                                    <div class="">
                                        <label >订单状态：</label>
                                        <span style="color: black" v-if="orderDetail.orders.orderStatus=='1'">
                                已支付
                            </span>
                                        <span style="color: black" v-if="orderDetail.orders.orderStatus=='2'">
                                待支付
                            </span>
                                        <span style="color: black" v-if="orderDetail.orders.orderStatus=='3'">
                                已退款
                            </span>
                                        <span style="color: black" v-if="orderDetail.orders.orderStatus=='4'">
                                退款中
                            </span>
                                        <span style="color: red" v-if="orderDetail.orders.orderStatus=='5'">
                                已失效
                            </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </section>
</div>

<%--<div id="app" style="height: 100%">--%>


<%--</div>--%>

<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">
    // 模态框触发
    new Vue({
        el: ".public-main-right",
        data: {
            ordersDetailList: [],
            orderDetail: {
                dId: "",
                course: {cId: "", cName: ""},
                orders: {oId: "", user: {userId: "", uname: ""}, totals: "", orderStatus: "", buyingTime: ""}
            },
            orderTypeList:[]
        },
        methods: {
            addCourse: function () {
                $('#myModal').modal("show");
            },
            delOrderDetail: function () {
                $('#myModal1').modal("show");
            },
            find: function (oid) {
                var _this = this;
                axios.get('/findByOid', {
                    params: {
                        oid: oid
                    }
                })
                    .then(function (response) {
                        _this.orderDetail = response.data;
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
                console.log(this.orderDetail);
                // console.log(this.orderDetail.orders.otherStatus)
                // $('#myModal2').modal("show");
                },
                showAll: function () {
                    var _this = this;
                    axios.get('${pageContext.request.contextPath}/orderDetailList')
                        .then(function (response) {
                            _this.ordersDetailList = response.data;
                        })
                        .catch(function (error) {
                            console.log(error)
                        });
                },
                updateOrder:function (page) {
                    var _this = this;
                    axios.post("/updateOrder",_this.orderDetail.orders)
                    .then(function (response) {
                        console.log(_this.orderDetail.orders)
                        window.location.href="/findByuNameAndcName?uname=${uname}&cName=${cName}&orderStatus=${orderStatus}&page="+page
                    })
                        .catch(function (error) {
                        console.log(error)
                    });
                },
            resetList:function () {
                axios.post("/findByuNameAndcName")
                .then(function () {
                    window.location.href="/findByuNameAndcName"
                })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            showOrderType:function () {
                var _this = this;
                axios.get('${pageContext.request.contextPath}/showOrderType')
                .then(function (response) {
                    _this.orderTypeList=response.data
                })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
            },
            created: function () {
                this.showAll();
                this.showOrderType()
            }

    })
</script>


</body>

</html>